<%--
  Created by IntelliJ IDEA.
  User: Shinelon
  Date: 2018/3/26
  Time: 10:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <title>kafka 监控中心</title>
    <link rel="stylesheet" href="http://localhost:8080/kafka-monitor/static/plugins/GUI-3.0.0/css/rdc.min.css">
    <link rel="stylesheet" href="http://localhost:8080/kafka-monitor/static/plugins/GC-ui1.0.0/css/gui.min.css">
    <link rel="stylesheet" href="http://localhost:8080/kafka-monitor/static/css/layout-web.css">
    <link rel="stylesheet" href="http://localhost:8080/kafka-monitor/static/css/gallary.css">
    <link rel="stylesheet" href="http://localhost:8080/kafka-monitor/static/css/bootstrap.css">

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript" src="http://localhost:8080/kafka-monitor/static/js/bootstrap.min.js"></script>

    <style type="text/css">
        table tr:nth-child(even) {
            background: #ccc;
        }

        table tr td {
            text-align: center !important;
        }
    </style>

    <script>
        function formatTime(timeValue) {
            var dateTime = new Date(timeValue);
            var yearValue = dateTime.getFullYear();
            var monthValue = dateTime.getMonth()+1;
            var dayValue = dateTime.getDate();

            var hourValue = dateTime.getHours();
            var minuteValue = dateTime.getMinutes();
            var secondValue = dateTime.getSeconds();
            return yearValue+"-"+monthValue+"-"+dayValue+" "+hourValue+":"+minuteValue+":"+secondValue;
        }
    </script>
</head>

<body>
<div class="ued-container ued-layout-top ui-sortable" data-drag="layout">
    <div class="ued-top ued-top1" id="top1-3">
        <div class="ued-top-inner clearfix ui-edit-set" data-set="change_top"
             style="background: url(http://localhost:8080/kafka-monitor/static/images/banewbg10.jpg) center center / cover no-repeat rgb(0, 0, 0);">
            <div class="ued-top-left f-l">
                <div class="ude-logo-box">
                    <a href="javascript:;">
                        <span class="logowrap ui-edit-set" data-set="change_logo_info" style="width:152px;">
                        <img src="http://localhost:8080/kafka-monitor/static/plugins/GUI-3.0.0/images/top/ustc_top_logo.png" alt="" class="ued-top-logo">
                        </span>
                        <span class="ued-top-tit ui-edit-set" data-set="change_tit"
                              contenteditable="true">kafka 信息监控</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="ued-container ued-layout-middle">
    <div class="ued-side ued-layout-side ui-sortable" data-drag="layout" style="top: 81px; bottom: 0px;">
        <div class="side-nav-wrap JS-scroll" id="side-nav1-2">
            <ul class="ued-nav-custom">
                <li class="ued-menu-list ued-nav-active">
                    <a href="javascript:void(0)"><i class="ued-ico ued-ico-jz"></i> <span>集中监控</span></a>
                    <ul class="ued-sub-menu-list">
                        <li><a href="http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/getTopicList"> topic 列表展示</a></li>
                        <li class="active"><a href="http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/getAllMonitorInfo">概况监控</a></li>
                        <li><a href="http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/getBrokerInfo">Broker 节点监控</a></li>
                        <li><a href="http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/getTopicMetadataInfo">topic 元数据监控</a></li>
                    </ul>
                </li>
                <li class="ued-menu-list">
                    <a href="javascript:void(0)"><i class="ued-ico ued-ico-dkh"></i> <span>topic 操作中心</span></a>
                    <ul class="ued-sub-menu-list">
                        <li><a href="http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/searchTopic"> topic 查询中心</a></li>
                        <li><a href="http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/createTopic"> 增加主题</a></li>
                    </ul>
                </li>
                <li class="ued-menu-list">
                    <a href="javascript:void(0)"><i class="ued-ico ued-ico-sjzh"></i> <span> 配置文件管理</span></a>
                    <ul class="ued-sub-menu-list">
                        <li><a href="http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/getConfigFileList"> 配置文件展示</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="ued-main ued-layout-main" style="top: 81px; bottom: 0px;">
        <div style="margin-top: 16px;">
            主题名称：<input type="text" id="topicName" class="input-small" placeholder="主题名称">&nbsp;&nbsp;&nbsp;
            组名：<input type="text" id="groupName" class="input-small" placeholder="组名">&nbsp;&nbsp;&nbsp;
            开始时间：<input id="beginTime" name="beginTime" type="text" style="width:150px;"
                        maxlength="20" class="input-small"
                        onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});" />&nbsp;&nbsp;&nbsp;
            结束时间：<input id="endTime" name="endTime" type="text"  style="width:150px;"
                        maxlength="20" class="input-small"
                        onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});" />&nbsp;&nbsp;&nbsp;
            <button type="submit" id="searchSubmit" class="btn">查询</button>
        </div>

        <%--kafka 概况监控--%>
        <div id="tab1">
            <div class="alert">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>Warning!</strong> 当前是kafka 概况监控页面！
            </div>
            <div class="ued-layout-main-scroll ui-sortable" data-drag="layout">
                <table class="table table-bordered">
                    <thead style="color: #00aeff;">
                    <tr>
                        <td style="font-weight: bolder;font-size: 18px;">主题名</td>
                        <td style="font-weight: bolder;font-size: 18px;">分区</td>
                        <td style="font-weight: bolder;font-size: 18px;">组名</td>
                        <td style="font-weight: bolder;font-size: 18px;">配置文件</td>
                        <td style="font-weight: bolder;font-size: 18px;">消息总量</td>
                        <td style="font-weight: bolder;font-size: 18px;">消息增量</td>
                        <td style="font-weight: bolder;font-size: 18px;">已消费消息量</td>
                        <td style="font-weight: bolder;font-size: 18px;">已消费消息增量</td>
                        <td style="font-weight: bolder;font-size: 18px;">时间</td>
                    </tr>
                    </thead>

                    <tbody id="kafkaInfoBody">
                    <c:forEach items="${listData}" var="kafkaMonitorInfo">
                        <tr>
                            <td>${kafkaMonitorInfo.topic}</td>
                            <td>${kafkaMonitorInfo.partitions}</td>
                            <td>${kafkaMonitorInfo.groupName}</td>
                            <td>${kafkaMonitorInfo.groupJaasConf}</td>
                            <td>${kafkaMonitorInfo.logSize}</td>
                            <td>${kafkaMonitorInfo.logSizeIncrement}</td>
                            <td>${kafkaMonitorInfo.offset}</td>
                            <td>${kafkaMonitorInfo.offsetIncrement}</td>
                            <td>
                                <script>
                                    var dateTime = formatTime(${kafkaMonitorInfo.commitTime});
                                    document.write(dateTime);
                                </script>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

<script src="http://localhost:8080/kafka-monitor/static/plugins/jquery-1.10.2.min.js"></script>
<script src="http://localhost:8080/kafka-monitor/static/plugins/GUI-3.0.0/js/rdc.min.js"></script>
<script src="http://localhost:8080/kafka-monitor/static/plugins/GC-ui1.0.0/gui.js"></script>
<script src="http://localhost:8080/kafka-monitor/static/plugins/GUI-3.0.0/plugins/numberRun/num.js"></script>
<script src="http://localhost:8080/kafka-monitor/static/plugins/GUI-3.0.0/plugins/goalProgress.js"></script>
<script src="http://localhost:8080/kafka-monitor/static/plugins/GUI-3.0.0/plugins/nicescroll/jquery.nicescroll.js"></script>
<script src="http://localhost:8080/kafka-monitor/static/plugins/GUI-3.0.0/plugins/My97DatePicker/WdatePicker.js"></script>
<script src="http://localhost:8080/kafka-monitor/static/plugins/GUI-3.0.0/plugins/jquery.select.js"></script>
<script src="http://localhost:8080/kafka-monitor/static/js/gallary.js"></script>

<script type="text/javascript">

    function ajaxGetKafkaMonitorInfo() {
        $.ajax({
            url : "http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/ajaxGetKafkaMonitorInfo",
            type : 'post',
            async : false,
            dataType : "json",
            success : function(data) {
                $("#kafkaInfoBody").html("");
                var bodyHtml = "";
                var listData = data.listData;
                for(var i=0;i<listData.length;i++){
                    var topic = listData[i].topic;
                    var partitions = listData[i].partitions;
                    var groupName = listData[i].groupName;
                    var groupJaasConf = listData[i].groupJaasConf;
                    var logSize = listData[i].logSize;
                    var logSizeIncrement = listData[i].logSizeIncrement;
                    var offset = listData[i].offset;
                    var offsetIncrement = listData[i].offsetIncrement;
                    var commitTime = listData[i].commitTime;

                    bodyHtml += "<tr><td>"+topic+"</td>";
                    bodyHtml += "<td>"+partitions+"</td>";
                    bodyHtml += "<td>"+groupName+"</td>";
                    bodyHtml += "<td>"+groupJaasConf+"</td>";
                    bodyHtml += "<td>"+logSize+"</td>";
                    bodyHtml += "<td>"+logSizeIncrement+"</td>";
                    bodyHtml += "<td>"+offset+"</td>";
                    bodyHtml += "<td>"+offsetIncrement+"</td>";
                    bodyHtml += "<td>"+formatTime(commitTime)+"</td></tr>";

                }
                $("#kafkaInfoBody").html(bodyHtml);
            }
        });
    }

    $(function () {
        setInterval(ajaxGetKafkaMonitorInfo,5000);
        $("#searchSubmit").click(function () {
            var topicName = $("#topicName").val();
            var groupName = $("#groupName").val();
            var beginTime = $("#beginTime").val();
            var endTime = $("#endTime").val();

            window.location.href = "http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/searchTopicFromMysql?" +
                "topicName="+topicName+"&groupName="+groupName+"&beginTime="+beginTime+"&endTime="+endTime;
        });
    });

</script>
</div>
</body>
</html>
